<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="div">
            <div class="content-header common-search-border1">
                <el-button class="butAdd" @click="handleCreate"> 新增病人
                </el-button>
            </div>

        <div class="app-container">
            <div class="box common-search-border2">
                <div class="filter-container">
                    <!--
                        :inline="true	行内表单模式 (表单项横向排列)
                        :model="queryParams"  数据绑定
                        ref="queryParams" 用于找到本表单使用
                    -->
                    <el-form :inline="true" :model="queryParams" ref="queryParams"
                             class="formInfo">
                        <el-form-item label="患者名称" label-width="80px">
                            <el-input placeholder="请输入" v-model="queryParams.patientName"
                                      style="width: 200px;" class="filter-item"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="handleRest">清除</el-button>
                            <el-button type="primary" class="butOK" @click="handleSearch">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="box common-table-border" style="margin:8px 0 0;">
                <!--
                    data	显示的数据
                    fit	列的宽度是否自撑开
                -->
                <el-table
                        :data="patientList"
                        fit
                        style="width: 100%;">
                    <el-table-column label="患者id" align="center" prop="id">
                    </el-table-column>
                    <el-table-column label="患者姓名" align="center" prop="name">
                    </el-table-column>
                    <el-table-column label="患者性别" align="center"  prop="gender">
                    </el-table-column>
                    <el-table-column label="所属科室" align="center" prop="department.name">
                    </el-table-column>
                </el-table>
                <!--
                     T分页组件
                       @size-change： 当改变每页条数时触发的函数
                       @current-change：当改变页码时触发的函数
                       current-page ：默认的页码
                       :page-sizes：每页条数选择框中显示的值
                       :page-size : 默认的每页条数
                       layout： 分页组件的布局
                           total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
                       :total: 总条数
                 -->
                <div class="pagination-container">
                    <el-pagination
                            class="pagiantion"
                            v-show="pagination.total>0"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.pageNum"
                            :page-sizes="[3, 5, 10, 15]"
                            :page-size="pagination.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>
            </div>
            <!-- 新增用户弹层
                   :visible.sync 是否显示 (dialogFormVisible=true 显示, =false隐藏)
            -->
            <el-dialog title="新增患者" align="left" :visible.sync="dialogFormVisible" width="40%" top="8vh">
                <!--
                    model	表单数据对象
                    rules	表单验证规则
                -->
                <el-form label-width="120px" :model="addPatient" :rules="rules" ref="form">
                    <!--
                    prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
                    -->
                    <el-form-item label="患者姓名：" prop="name">
                            <!-- v-model 双向数据绑定  autocomplete=off 取消自动补全功能-->
                        <el-input v-model="addPatient.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="患者性别: " prop="gender">
                        <template>
                            <el-radio v-model="addPatient.gender" label="男">男</el-radio>
                            <el-radio v-model="addPatient.gender" label="女">女</el-radio>
                        </template>
                    </el-form-item>
                    <el-form-item label="所属科室: " prop="did">
                        <template>
                            <el-select v-model="addPatient.did" placeholder="请选择科室">
                                <el-option
                                        v-for="item in departmentOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </template>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="handleCreateCancel">取 消</el-button>
                    <el-button type="primary" @click="handleCreateConfirm">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</body>
<script>

    new Vue({
        el: "#div",
        data: {
            pagination: {
                total: 0,  //总条数
                pageNum: 1, // //当前页
                pageSize: 5 //每页显示条数
            },
            patientList: [],  //患者列表数据
            queryParams : {
                patientName: "", //要搜索的患者名字
            },
            dialogFormVisible: false, // 添加窗口显示状态
            departmentOptions : [//科室选项,需要从服务器获取
              /*  {
                    id: '1',
                    name: '外科'
                }, {
                    id: '2',
                    name: '内科'
                }*/
            ],
            addPatient: { // 新增病人
                name: '',
                gender: '',
                did: ''
            },
            rules: {
            }

        },
        created() {
            //分页查询用户列表
            this.getPatientList()
            //查询所有的科室(用于展示添加病人功能的下拉框)
            this.getDepartmentOptions()
        },
        methods: {
            //TODO: 获取病人分页数据(包含搜索)
            getPatientList() {
                let url = `/patient/${this.pagination.pageNum}/${this.pagination.pageSize}/${this.queryParams.patientName}`
                axios.get(url).then(response=>{
                    console.log(response.data);
                    if(response.data.code == 20041){
                        // 指定总记录数
                        this.pagination.total = response.data.data.total;
                        // 执行分页显示的数据
                        this.patientList = response.data.data.rows;
                    }else{
                        this.$message.error(response.data.msg)
                    }
                })
            },
            //TODO: 查询科室列表
            getDepartmentOptions() {
                //以下是伪数据
                /*let response = [//科室选项,需要从服务器获取
                      {
                          id: '1',
                          name: '外科'
                      }, {
                          id: '2',
                          name: '内科'
                      }
                ]*/
                axios.get("/department").then(response=>{
                    if(response.data.code == 20041){
                        this.departmentOptions = response.data.data
                        this.$message.success(response.data.msg)
                    }else{
                        this.$message.error(response.data.msg)
                    }
                })

            },
            //将查询条件置空
            handleRest() {
                this.queryParams = {
                    patientName: ''
                }
            },
            //搜索
            handleSearch() {
                //将当前页码设置为1
                this.pagination.pageNum = 1;
                this.getPatientList();
            },
            //每页数量改变的时候
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.pagination.pageNum = 1;
                this.getPatientList();
            },
            //当前页码改变的时候
            handleCurrentChange(val) {
                this.pagination.pageNum = val;
                this.getPatientList();
            },
            // 新增病人
            handleCreate() {
                if (this.$refs['form']) {
                    this.$refs['form'].resetFields();
                }
                this.dialogFormVisible = true;

            },
            //TODO:新增病人确定
            handleCreateConfirm() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        axios.post("/patient",this.addPatient).then(response=>{
                            console.log(this.addPatient);
                            console.log(response.data);
                            if(response.data.code == 20011){
                                this.handleSearch();
                                this.dialogFormVisible = false;
                                this.$message.success(response.data.msg)
                            }else{
                                this.$message.error(response.data.msg)
                            }
                        })
                    }
                });
            },
            //新增病人取消
            handleCreateCancel() {
                this.dialogFormVisible = false;
            }
        }
    })
</script>
</html>